import { defineStore } from 'pinia'
import { store } from '@/stores'
import designSetting from '@/settings/designSetting'
import type { TModeUnit } from '@/stores/modules/app'
// @ts-ignore
import type { IModeConfigValue } from '@/settings/designSetting'
import { config } from '@/settings/designSetting'
import { useAppStoreOut } from './app'

interface DesignSettingState {
  // 深色主题
  darkTheme: boolean
  // 系统风格
  appTheme: string
  // 系统内置风格
  appThemeList: string[]
  // 当前主题模式
  mode: TModeUnit
  // 公共主题配置
  commonConfig: IModeConfigValue
  // 头部主题配置
  headerConfig: IModeConfigValue
  // 侧边栏主题配置
  asideConfig: IModeConfigValue
  // 文章页主题配置
  articleConfig: IModeConfigValue
  // 页脚主题配置
  footerConfig?: IModeConfigValue
  // 组件主题配置
  componentConfig: IModeConfigValue
}

const appStore = useAppStoreOut()
const { themeMode } = appStore

const { darkTheme, appTheme, appThemeList } = designSetting

export const useDesignSettingStore = defineStore({
  id: 'app-design-settings',
  state: (): DesignSettingState => ({
    darkTheme,
    appTheme,
    appThemeList,
    mode: themeMode,
    commonConfig: config[themeMode]?.commonConfig || {},
    headerConfig: config[themeMode]?.headerConfig || {},
    asideConfig: config[themeMode]?.asideConfig || {},
    articleConfig: config[themeMode]?.articleConfig || {},
    componentConfig: config[themeMode]?.componentConfig || {}
  }),
  getters: {
    getDarkTheme(): boolean {
      return this.darkTheme
    },
    getAppTheme(): string {
      return this.appTheme
    },
    getAppThemeList(): string[] {
      return this.appThemeList
    },
    getCommonConfig(): IModeConfigValue | undefined {
      return this.commonConfig && Object.keys(this.commonConfig).length === 0
        ? config[this.mode]?.commonConfig
        : this.commonConfig
    },
    getHeaderConfig(): IModeConfigValue | undefined {
      return this.headerConfig && Object.keys(this.headerConfig).length === 0
        ? config[this.mode]?.headerConfig
        : this.headerConfig
    },
    getAsideConfig(): IModeConfigValue | undefined {
      return this.asideConfig && Object.keys(this.asideConfig).length === 0
        ? config[this.mode]?.asideConfig
        : this.asideConfig
    },
    getArticleConfig(): IModeConfigValue | undefined {
      return this.articleConfig && Object.keys(this.articleConfig).length === 0
        ? config[this.mode]?.articleConfig
        : this.articleConfig
    },
    getComponentConfig(): IModeConfigValue | undefined {
      return this.componentConfig && Object.keys(this.componentConfig).length === 0
        ? config[this.mode]?.componentConfig
        : this.componentConfig
    }
  },
  actions: {},
  // @ts-ignore
  persist: {
    key: 'PINIA-DESIGN-SETTING'
  }
})

// 供给外部使用
export const useDesignSettingStoreOut = () => useDesignSettingStore(store)
